<template>
  <div class="container mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
 
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="  pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div class="p-3">
  <div>
    

    <main class=" w-full">
       

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
         
          
            <div v-if="total>0" class=" text-success px-4 pb-3">{{total}} result(s) matching "{{keywords}}" </div>
         
            <!-- Replace with your content -->
         
          
          <!-- topics grid -->

             
            <!-- Replace with your content -->
             <div class="p-10 text-center text-gray-200" v-if="list.length==0 && showNothing">
               No matches found
            </div>
            <div    class="grid grid-cols-1 gap-4    sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4">
                 <a v-for="(item,k) in list" v-bind:key="k"  class="card shadow-lg compact side text-gray-300" :href="item.url"><div class="flex-row items-center space-x-4 card-body"><div>
                    <div class="avatar"  v-if="item.type=='user' && item.picture"><div class="rounded-full w-10 h-10 shadow" ><img  :src="item.picture"></div></div>
                    <div class="avatar placeholder"    v-else-if="item.type=='user'"><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item['icon:bgColor']"><span>{{item['icon:text']}}</span></div></div> 
                    <div v-else class="avatar"><div class="w-14 h-14 shadow"><img :src="item.cover"></div></div>
                     
                     </div> <div><h2 class="card-title" v-html="item.title"></h2> <p class="text-opacity-40 line-2" v-html="item.description"></p></div></div>
                </a>
            </div>
             <!-- recommend topics grid -->
           
            <!-- /End replace -->
         
 
         


   
 
            <!-- /End replace -->
           
          <!-- recommend topics grid -->
          
      </section>
    </main>
  </div>
</div>

</div>
</div>
</template>


<script>

export default {
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
 
  name: 'IndexPage',
   data(){
    return { 
      isFollowing:false,
      showNothing:false,
      list:[],
      slideTpye:'small',
      user:{},
      page:1,
      total:0,
      pl:"pl-0" ,

    }
  },
   async asyncData({req, query,$Data,error,$axios}) {
       //console.log("query:",query)

      return { 
           keywords:query.term
      }
   },
    async fetch({ store, params }) {
 
   },
   mounted(){
       document.getElementById("input_keywords").value = this.keywords
       this.getList();
   },
  methods: {
    async getList(){
       //this.$tools.showToast('Loading...', 10000)
      let res = await  this.$axios.post('snogogo_nuxt/api/getDocsWithScore',{keywords:this.keywords,page:this.page,type:"all"})
      //this.$tools.hideToast();
      if(res.code>0){
           var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
           this.$tools.alert("error",message);
           return;
      }
       this.total = res.data.total;
      if(res.data.list && res.data.list.length>0){
          var list = res.data.list.map(item=>{
               //console.log("item.type",item.type)
               if(item.type=="user"){
                   item.title=item.username;
                  //  item.picture="https://img.snogogo.com/"+item.picture+'?imageView2/1/w/120/h/120';
                   item.description = item.aboutme;
               }else if(item.type=="post"){
                   item.description = item.content;
               }
            //    item.description='Winn | VLOG 88 | 寻找独居的归属感 | 上班族一周怎么过 | 都是一人食早餐 |Winn | VLOG 88 | 寻找独居的归属感 | 上班族一周怎么过 | 都是一人食早餐'
               return item;
          })
        //   //console.log("list:",list)
         
          this.list = this.list.concat(list)
      }
      if(this.list.length==0){
        this.showNothing=true;
      }
      
       
    },

    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0";
        }
     }
   }
   
 
     

}
</script>
